<template>
	<el-container>
		<el-main class="nopadding">
			<el-table ref="table" v-loading="loading" :data="tableList" stripe height="100%">
				<el-table-column label="#" prop="id" width="100" align="center"></el-table-column>
				<el-table-column label="账户" prop="username"></el-table-column>
				<el-table-column label="业务名称" prop="service_name"></el-table-column>
				<el-table-column label="请求接口" prop="router"></el-table-column>
				<el-table-column label="请求方法" prop="method"></el-table-column>
				<el-table-column label="IP地址" prop="ip"></el-table-column>
				<el-table-column label="所在地址" prop="ip_location"  width="160"></el-table-column>
				<el-table-column label="返回状态码" prop="response_code" width="150"></el-table-column>
				<el-table-column label="操作时间" prop="created_at" width="180"></el-table-column>
			</el-table>
		</el-main>
		<el-footer>
    		<sc-page v-model="search"></sc-page>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				tableList: [],
				selection: [],
				search: {
					page: 1,
        			pageSize: 20,
					total: 0,
					paging: 0,
        			username: undefined,
				},
                time_stamp: [],
			}
		},
		mounted() {
			this.handleQuery()
		},
		watch: {
        	"search.paging": function() {
				this.handleQuery()
			},
		},
		methods: {
			//获取列表
			async getTableList() {
				this.loading = true
				var res = await this.$API.system.log.userOper.get(this.search)
				this.loading = false
				if(res.code == 200) {
					this.tableList = res.data.rows
					this.search.total = res.data.total
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				} 
			},
			//搜索
			handleQuery() {
				this.getTableList()
			},
			//重置搜索
			resetQuery() {
				this.search = {
        			username: undefined,
				}
                this.time_stamp = []
				this.handleQuery()
			},
		}
	}
</script>

<style>
</style>
